<template>
    <div class="histroybox">
        <div class='agoback' @click="fanhui">‹</div>
        <ul class="ls">
            <li class="title">历史记录</li>
            <li class="none"  v-show="!xss">
                <loading></loading>
            </li>
            <li class="nosong" v-show="youge">暂时没有歌曲，快去听歌吧</li>
            <li v-for="item in list" :key="item.id" v-show="xss">
                <div >
                    <div class="indexsong">
                        <div class="listsongfont">
                            <div class="listsongtop">{{item.name}}</div>
                            <div class="listsongdown">{{item.people}}</div>
                        </div>
                    </div>
                    <!-- <span class="listdian">...</span> -->
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import dingtop from "../small/dingtop.vue"
import loading from "../small/loading.vue"
export default {
    name:"histroy",
    components:{
        dingtop,
        loading
    },
    data(){
        return {
            list:[],
            xss:false,
            youge:false,
        }
    },
    beforeRouteEnter(to,from,next){
        let _token = localStorage.getItem('_token')
        if(_token == null){
            next({path:'/login'});// 跳转登录
        }
        else {
            next();// 进入个人中心
        }
    },
    created(){
        this.getdata()
    },
    methods:{
        fanhui(){
            this.$router.go(-1);
        },
        getdata(){
            if(this.$store.state.list2[0] == undefined){
                this.xss = true
                this.youge = true
            }
            let str = ''
            for(let j = 0;j<this.$store.state.list2.length;j++){
                if(j == 0){
                    str += this.$store.state.list2[j].id
                }else{
                    str += ","+this.$store.state.list2[j].id
                }
            }
            this.getname(str)
        },
        getname(str){
            axios.get(`https://apis.netstart.cn/music/song/detail?ids=${str}`).then(
                    res=>{
                        // console.log(res)
                        if(res.data.songs !== undefined){
                            let addarr = res.data.songs
                            for(let i = 0;i<addarr.length;i++){
                                let obj ={}
                                obj.name = addarr[i].name
                                obj.id = addarr[i].id
                                obj.people = addarr[i].al.name
                                this.list.push(obj)
                            }
                            this.xss = true
                            this.youge = false
                        }
                    },
                    err=>{
                        console.log(err)
                    }
                )
        },
        fanhui(){
            this.$router.go(-1)
        },
    }
}
</script>
<style lang="less" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.ls{
    width: 100%;
    height: 100%;
    // height: 300px;
    background-color: #f8f8f8;
    // border-top-left-radius: 40px;
    // border-top-right-radius: 40px;
    // position: absolute;
    top: 260px;
    padding-top:1px;
    box-sizing: border-box;
}
li{
    padding: 10px;
    box-sizing: border-box;
    margin: 10px auto;
    border-radius: 10px;
    background-color: white;
    width: 90%;
    position: relative;
}
 .listsongfont{
        width: 70%;
        .listsongtop{
            margin-top: 10px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #838383;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .listsongdown{
            font-size: 0.9rem;
            color: #838383ab;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .listdian{
        position: absolute;
        top: 50%;
        right:10%;
        top: 40%;
        font-size: 2rem;
        transform: translateY(-50%);
    }
    .histroybox{
        width: 100%;
        height:100%;
    }
    .title{
        text-align: center;
        background-color: transparent;
        font-size: 20px;
        font-weight: 700;
    }
    .none{
        background-color: transparent;
        width: 100%;
        height: 80%;
    }
    .nosong{
        text-align: center;
        background-color: transparent;
        font-size: 25px;
        color: #838383ab;
        margin-top: 150px;
        font-family: 'YouYuan';
        font-weight: 700;
    }
.agoback{
    position:fixed;
    top: 0px;
    left: 0px;
    font-size: 2rem;
    color: #ddd;
    // background-color: #eeeeee66;
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    z-index: 1000;
}
.ascro{
    color:#a3a3a3 !important;
}
</style>